<template>

<view class="body">

  <view class="l"></view>

  <view class="header">

    <view class="header_top">

      <view class="header_top_left">
 
        <text >2048</text>

      </view>

      <view class="header_top_rigth">

        <view class="header_top_rigth_view">

           <view class="view_1">SCORE</view>

           <view class="view_2">{{score}}</view>

        </view>

        <view class="header_top_rigth_view">

          <view class="view_1">LIFE</view>

           <view class="view_2">{{life}}</view>

        </view>

      </view>

    </view>

    <view class="header_buttom">

      <text></text>

      <view class="button_" @click="reset">重新开始</view>
	
    </view>

  </view>

  <view class="play">

    <view class="content" @touchstart="start" @touchend="end">

      <view class="item" v-for="(item,index) in numbers" :key='index'>

        <div :class="item===0?numberZeroClass:'number'"

        :style="itemStyles[Math.log2(item)]">{{item}}</div>

      </view>

    </view>

  </view>


 

</view>

</template>

<script>
	
  export default {
	
    name:'play',

    data() {

      return {
		
        numbers: [],
		life: 50,
		score:0,
		final:4,
        numberZeroClass: 'number numberZero', // 格子为零将数字隐藏

        itemStyles:'color:#000; background:', // 根据数字大小设置颜色

        startX: '', //开始触摸的x坐标

        startY: '', //开始触摸的y坐标

      }

    },

    created() {

      this.numbers = [0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

      this.itemStyles = [

        'color:#000; background:#FFF3EE',

        'color:#000; background:#FFDAC8',

        'color:#000; background:#FFBD9D',

        'color:#000; background:#FF9D6F',

        'color:#000; background:#FF5809',

        'color:#000; background:#FF8040',

        'color:#fff; background:#F75000',

        'color:#fff; background:#BB3D00',

        'color:#fff; background:#842B00',

        'color:#fff; background:#424200',

        'color:#fff; background:#000079',

        'color:#fff; background:#2F0000',

      ]

      // this.fristNumber()

    },
	check(){
		this.numbers.forEach((item,index)=>{if(item==this.final)
			uni.showToast({
				title:'成功',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'success',
				//显示持续时间为 2秒
				duration: 2000
			})
		})
	},
watch:{
	life(life,old_life){
		if(old_life!=0)
				life--
			else{
				
				uni.showToast({
					title:'失败',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'error',
					//显示持续时间为 2秒
					duration: 2000
				})
				this.reset()
			}},
			
	final(final,old_final){
		this.numbers.forEach((item,index)=>{if(item==final)
			uni.showToast({
				title:'成功',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'success',
				//显示持续时间为 2秒
				duration: 2000
			})
		})
	},
},
/*onLoad() {
            // 播放背景音乐
			
           // this.$music.play_b1({mute:false})
        },*/
    methods: {
		
		//关闭或开启 音乐 
		       /*     musicBtn() {
		                this.muteBgMusic = !this.muteBgMusic
		                console.log(this.muteBgMusic,this.muteBgMusic?'已关闭音乐####':'已开启音乐####');      
		                if (this.muteBgMusic) {
		                    // 开启静音
		                    this.$music.play_b1({mute:true})
		                } else {
		                    // 关闭 静音
		                    this.$music.play_b1({mute:false})
		                }
		            },*/
		
      fristNumber(){

        this.numbers[Math.floor(Math.random()*16)] = 2

      },
	  reset(){
			let x = Math.floor(Math.random()*15)
			let y = Math.floor(Math.random()*30)
			this.numbers = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
			this.numbers[x] = y
			this.life=50
			this.score=0
			
		},
		/*ok(){
			this.numbers.forEach((item,index)=>{
				if(item==this.final){
					uni.showToast({
					title:'成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})}
				this.reset()})
		},*/
      move(direction){
		
        let arr = []

        let numbers = this.numbers.slice(0) // 深拷贝

        let arrItem = []
		let i=0
			//this.$music.ok({mute:false})
			this.numbers.forEach((item,index)=>{
				if(item==this.final){
				uni.showToast({
					title:'成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})
			
			}}
			)
				
			
	
		if(this.life!=0)
					this.life--
					
				else{
					
					uni.showToast({
						title:'失败',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 2000
					})
					this.reset()
				}
        switch(direction){

          case 'up':{

            console.log('up');

            // 从上到下每一行生成一个数组

            numbers.forEach((item, index) => {

              for (let i = 0; i < this.numbers.length / 4; i++) {

                arrItem.push(numbers.shift(index))

              }

              arr.push(arrItem)

              arrItem = []
				
            })
			
          }break

          case 'down':{

            // 从下到上每一行生成一个数组

            numbers.forEach((item, index) => {

              for (let i = 0; i < this.numbers.length / 4; i++) {

                arrItem.push(numbers.shift(index))

              }

              arr.unshift(arrItem)

              arrItem = []

            })

          }break

          case 'left':{

            // 从左到右每一列生成一个数组

            let c0 = [],c1 = [],c2 = [],c3 = []

            numbers.forEach((item, index) => {

              if(index % 4 === 0){

                c0.push(item)

              }else if(index % 4 === 1){

                c1.push(item)

              }else if(index % 4 === 2){

                c2.push(item)

              }else{

                c3.push(item)

              }

            })

              arr.push(c0,c1,c2,c3)

          }break

          case 'right':{

            // 从右到左每一列生成一个数组

            let c0 = [],c1 = [],c2 = [],c3 = []

            numbers.forEach((item, index) => {

              if(index % 4 === 0){

                c0.push(item)

              }else if(index % 4 === 1){

                c1.push(item)

              }else if(index % 4 === 2){

                c2.push(item)

              }else{

                c3.push(item)

              }

            })

              arr.push(c3,c2,c1,c0)

          }break

          default :

            console.log('move parameter must one of up、down、left and right of sting type');

          }

          let arrItem1

          let arrItem2

          let added = [] //arrItem1相加过的索引

          for (let i = 0; i < 3; i++) { // 循环三次

            arr.forEach((item2, index2) => {

              if (index2 < arr.length - 1) {

                arrItem1 = item2

                arrItem2 = arr[index2 + 1]

                arrItem1.forEach((item, index) => {

                  if (arrItem2[index] === 0 || item === 0) {

                    arrItem1[index] += arrItem2[index]

                    arrItem2[index] = 0

                  } else if (item === arrItem2[index] && item * arrItem2[index] !== 0 &&

                    added.indexOf(index) == -1) {
					this.score++
                    arrItem1[index] += arrItem2[index]

                    arrItem2[index] = 0

                    added.push(index)

                  }

                })

              }

            })
i
          }

          let startNumber = this.numbers // 记录初始numbers

          if(direction === 'up'){

            this.numbers = arr.flat()      

           

          }else if(direction === 'down'){

            let numbers2 = []

            arr.forEach((item, index)=>{

              numbers2.push(arr[3-index])

            })

            this.numbers = numbers2.flat()

           

          }else if(direction === 'left'){

            let numbers3 = []

            for (let i = 0; i < arr.length; i++) {

              arr.forEach((item, index)=>{

                numbers3.push(item[i])

              })

            }

            this.numbers = numbers3.flat()

           

          }else if(direction === 'right'){

            let numbers4 = []

            for (let i = 0; i < arr.length; i++) {

              for (let k = 0; k < arr.length; k++){

                numbers4.push(arr[3-k][i])

              }

            }

            this.numbers = numbers4.flat()

          }

         

         

          let endNumber = this.numbers // 记录结束numbers

          // 开始和结束的numbers不相等即存在数字的位置都发生变化，增加数字

          if (startNumber.toString() !== endNumber.toString()) {

            this.addNumber()

          }

       

      },

      //随机添加数字

      addNumber() {

        let arrZeros = [] // numbers中值为零的索引

        this.numbers.forEach((item, index) => {

          if (item === 0) arrZeros.push(index)

        })

        //arrZeros数组中随机取一个值

        let randomItem = arrZeros[Math.floor(Math.random() * arrZeros.length)]

        this.numbers[randomItem] = 2

      },

      getNumberColor(){

       

      },

      start(e) {

        this.startX = Math.floor(e.changedTouches[0].clientX)

        this.startY = Math.floor(e.changedTouches[0].clientY)

      },

      end(e) {

        // x,y为滑动的距离

        let x = Math.floor(e.changedTouches[0].clientX) - this.startX

        let y = Math.floor(e.changedTouches[0].clientY) - this.startY

        if (x > 50 && 0 < y < 50) {

          // console.log('右滑')
			
          this.move('right')
		  

        } else if (x < -50 && 0 < y < 50) {

          // console.log('左滑')

          this.move('left')
			
        } else if (0 < x < 50 && y < -50) {

          // console.log('上滑')

          this.move('up')
		
        } else if (0 < x < 50 && y > 50) {

          // console.log('下滑');
		
		   this.move('down') 
          

        }

      }

    },

  }

</script>

<style scoped lang="scss">

.body{

  width: 100vw;

  height: 100vh;

  display: flex;

  flex-direction: column;

  background: #fafce7;

  .l{

    width: 100%;

    height: 5%;

  }

  .header{

    width: 100%;

    height: 30%;

    .header_top{

      width: 100%;

      height: 40%;

      display: flex;

      .header_top_left{
		
        width: 30%;
		
        position: relative;

        text{

          font-size: 30px;

          font-weight: 550;

          color: #6b635c;

          position:absolute;

          bottom: 5px;

          left: 15px;

        }

      }

      .header_top_rigth{

        width: 70%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: space-around;

        .header_top_rigth_view{

          width: 28%;

          height: 85%;

          background: #b4a394;

          border-radius: 8px;

          .view_1{

            width: 100%;

            height: 40%;

            display: flex;

            align-items: center;

            justify-content: space-around;

            font-size: 18px;

            font-weight: 550;

            color: #e8dacd;

          }

          .view_2{

            width: 100%;

            height: 60%;

            display: flex;

            align-items: center;

            justify-content: space-around;

            font-size: 30px;

            font-weight: 550;

            color: #FFF;

          }

        }

      }

    }

    .header_buttom{

      width: 100%;

      height: 60%;

      position: relative;

      text{

        position: absolute;

        font-size: 18px;

        top: 8px;

      }

      .button_{

        width: 150px;

        height: 60px;

        background: #846f5b;

        position: absolute;

        top: 25px;

        left: 130px;

        text-align: center;

        line-height: 60px;

        font-size: 18px;

        color: #fff;

        border-radius: 8px;

      }

    }

  }

}

  .play {

    width: 100%;

    height: calc(100% - 35%);

    display: flex;

    justify-content: space-around;

    .content {

      display: flex;

      justify-content: space-around;

      box-sizing: border-box;

      flex-wrap: wrap;

      width: 310px;

      height: 310px;

     

      .item {

        width: 23%;

        height: 23%;

        background: #fff;

        .number {

          color: #fff;

          background: #f6ff43;

          border-radius: 10%;

          text-align: center;

          line-height: 73.6px;

          font-size: 25px;

          font-weight: 600;

        }

        .numberZero {

          background: #D1E9E9;

          font-size: 0px;

        }

      }

    }

  }

</style>
